<template>
  <h2>$emit绑定事件</h2>
  <div class="note">
    <p>1. 子组件$emit('sonEmit')绑定事件，父组件@son-emit调用</p>
    <p>2. $emit参数：第一个为事件名称，后面的自定义，可以是变量，可以是函数</p>
  </div>

  <hr class="hr-style">
  <div class="test">
    <button type="button" @click="$emit('sonEmit',handleEmit)">emit触发父组件绑定子组件上的函数</button>
    <!-- <button type="button" @click="handleEmit">emit触发父组件绑定子组件上的函数</button> -->
    <div v-show="isShow" style="height: 100px;width:100px;background-color: blue;"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isShow = ref(false)
// const sonEmit = ()=>{
//   isShow.value = !isShow.value
// }
const handleEmit = ()=>{
  isShow.value = !isShow.value
}
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
